;function FloatingBubble(container, content, options) {
    var $this = this;
    var defaults = $.extend(options,{
        delay:50,
        speed:1,
        width:60,
        height:80,
    });

    var $container = $(container);
    var width  = $container.width() - defaults.width;
    var height = $container.height() - defaults.height;
    var speedX = defaults.speed;
    var speedY = defaults.speed;
    var posX = Math.round(Math.random()*width);
    var posY = Math.round(Math.random()*height);

    var bubble = $("<div/>").html('<div>'+content+'</div>').css({
        'position':'absolute',
        'z-index':FloatingBubble.zIndex++,
        'left':posX+'px',
        'top':posY+'px'
    }).on('click', function () {
        clearInterval($this.interval);
        $(this).animate({
            top:-defaults.height+'px'
        }, 500, function () {
            $(this).remove();
        });
        if (defaults.onClick) defaults.onClick($this);
    });
    $(container).append(bubble);

    this.float = function () {
        if(posX<0||posX>width) {
            speedX = -speedX;
        }
        if(posY<0||posY>height) {
            speedY = -speedY;
        }

        posX+= speedX;
        posY+= speedY;
        bubble.css({
            left:posX+'px',
            top:posY+'px',
        });
    };

    this.hide = function () {
        bubble.hide();
    };

    this.remove = function () {
        bubble.remove();
    };

    this.getRandomNum = function (Min, Max){
        var Range = Max - Min;
        var Rand = Math.random();
        return(Min + Math.round(Rand * Range));
    };
    speedX = this.getRandomNum(0, 1) ? speedX : -speedX;
    speedY = this.getRandomNum(0, 1) ? speedY : -speedY;
    this.interval = setInterval(this.float, defaults.delay);
}

FloatingBubble.zIndex = 1000;

$(function () {
    var audio = $('<audio/>').attr('src', '/images/game/sound.mp3').appendTo(document.body);
    $.ajax({
        url:'/h5/game/getbubbles',
        success:function (response) {
            $(response.items).each(function (i, d) {
                new FloatingBubble('#game',
                    '<div class="paopao">\n' +
                    '            <div class="pao"></div>\n' +
                    '            <div class="inte">'+d.points+'</div>\n' +
                    '        </div>',
                    {
                        onClick:function () {
                            audio[0].play();
                            $.ajax({
                                url:'/h5/game/pickupbubble',
                                data:{id:d.id},
                                success:function () {
                                    var tips = $('<div/>').addClass('dsxui-toast')
                                        .html('<div class="dsxui-toast-content" style="font-size: 14px;">获得茶多分'+d.points+'</div>')
                                        .appendTo(document.body).center().fadeIn('fast', function () {
                                            setTimeout(function () {
                                                tips.fadeOut('fast', function () {
                                                    $(this).remove();
                                                });
                                            }, 1500);
                                        });
                                },
                                complete:function (xhr) {
                                    //alert(JSON.stringify(xhr));
                                }
                            });
                        }
                });
            });
        }
    });
});
